<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
</head>
<body>
   <script type="text/javascript">
       //测试
        //获得sessionStorage中的empno
       var empno = sessionStorage.getItem("empno");
        console.log(empno);
        $(function(){
        	loadDatas();
        	  //页面加载后执行
        	  $.ajax({
        		   url:"/mvc-demo08/emp/"+empno,
        		   type:"GET",
        		   dataType:"JSON",
        		   success:function(data){
        			    console.log(data);
        			    //使用data填充表单
        			     var e = data;
        			    //编号
        			    $("form input[name=empno]").val(e.empno);
        			    //姓名
        			    $("form input[name=ename]").val(e.ename);
        			    //性别
        			    var sexs = $("form input[name=esex]");
        			    //遍历 sexs
                         sexs.each(function(){
                        	  //当前遍历到的那个对象
                        	 if($(this).prop("value")==e.esex){
                        		   //选中
                        		   $(this).prop("checked",true);
                        	 }else{
                        		  //不选中
                        		 $(this).prop("checked",false);
                        	 }
                        	 
                         });
        			    //年龄
        			    $("form input[name=eage]").val(e.eage)
        			    //薪资
        			    $("form input[name=esalary]").val(e.esalary);
        			    //部门
        			    $("select#dept-sel").val(e.dept.deptno);//自然会选中
        			    //经理
        			    $("select#mgr-sel").val(e.mgr.empno);
        		   },
        		   error:function(error){
        			     alert("获取数据失败");
        		   }
        		     
        	  });
        	
        });
        
       function loadDatas(){
    	   $.ajax({
  	    	 url:"/mvc-demo08/emp/loadDatas",
  	    	 type:"GET",
  	    	 dataType:"JSON",
  	    	 //async默认为true,默认发异步请求,
  	    	 //如果修改为false,就发同步请求
  	    	 async:false,
  	    	 success:function(data){
  	    		  console.log(data);
  	    		  var depts = data.depts;
     			   var mgrs = data.mgrs;
     			   //刷新部门数据
     			   for(var i=0;i<depts.length;i++){
     				    var dept = depts[i];
     				   var $op = 
     				   $("<option value='"+dept.deptno+"'>"+dept.dname+"</option>");
     				   $("#dept-sel").append($op);
     			   }
     			   //刷新经理数据
     			   for(var i=0;i<mgrs.length;i++){
     				      var mgr = mgrs[i];
     				      var $op = 
     				      $("<option value='"+mgr.empno+"'>"+mgr.ename+"</option>");
     				      $("#mgr-sel").append($op);
     			   }
  	    	 },
  	    	 error:function(error){
  	    		    alert("加载数据失败");
  	    	 }
  	    	
  	    });
       }  
       
       
       $(function(){
    	   //修改员工
     	  $("#btn").on("click",function(){
     		   //表单验证
     		   //姓名 2~4个汉字
     		   var ename = $("form input[name=ename]").val();
     		   //ename
     		   ename = ename.trim();
     		   if(ename===""||ename==null){
     			   $("#ename-msg").html("姓名不能为空").css({"color":"red"});
     			   return;
     		   }
     		   //创建正则对象
     		   var reg = /^[\u4e00-\u9fa5]{0,}$/;
                if(!reg.test(ename)){
             	    //提示错误信息
             	    $("#ename-msg").html("合法姓名是2~4个汉字").css({"color":"red"});
             	    return;
                }
     		   //用户名验证通过
     		       $("#ename-msg").html("OK").css({"color":"green"});
     		   //合法年龄18~65
     		   var eage = $("form input[name=eage]").val();
     		   eage = eage.trim();//去掉左右的空格
     		   if(eage==="" || eage==null){
     			    $("#eage-msg").html("年龄不能为空").css({"color":"red"});
     			    return;
     		   }
                //年龄不能为非数字
                 if(isNaN(eage)){
                 	 $("#eage-msg").html("年龄不能非数字").css({"color":"red"});
      			      return;
                 }
                if(eage<18 || eage>65){
             	   $("#eage-msg").html("合法年龄是18~65").css({"color":"red"});
   			      return;
                }
                $("#eage-msg").html("OK").css({"color":"green"});
                //合法薪资3000~5000
                var esalary = $("form input[name=esalary]").val();
                esalary = esalary.trim();
                if(esalary===""||esalary==null){
             	     $("#esalary-msg").html("薪资不能为空").css({"color":"red"});
             	      return;
                }
                if(isNaN(esalary)){
             	   $("#esalary-msg").html("薪资不能为非数字").css({"color":"red"});
          	         return;
                }
                
                if(esalary<3000 || esalary>50000){
             	 $("#esalary-msg").html("合法薪资3000~5000").css({"color":"red"});
        	         return;
                }
                          	   
     		   //全部验证通过，才能提交表单
     		  var dd =  $("#updateForm").serializeArray();
     		   dd["7"] = {"name":"_method","value":"PUT"};
     		  
     		   //console.log(dd);
     		   //提交表单
     		    $.ajax({
     		    	 url:"/mvc-demo08/emp",
     		    	 type:"POST",
     		    	 dataType:"TEXT",
     		    	 data:dd,//$("#updateForm").serialize() +"&_method=PUT",
     		         success:function(data){
     		        	   if(data==="OK"){
     		        		   location.href="/mvc-demo08/view/ListEmp.html";
     		        	   }
     		        	   
     		         },
     		         error:function(error){
     		        	  alert("添加数据失败...");
     		         }
     		    });
     	  });
       })
      
   </script>
    <form id="updateForm">
     <!-- 员工id -->
     <input type="hidden" name="empno"/>
    姓名:<input name="ename"/> 
      <span id="ename-msg"></span>
    <br/>
    性别:<label>
        <input type="radio" name="esex" value="男"/> 男
    </label>
     <label>
        <input type="radio" name="esex" value="女" /> 女
    </label> <br/>
    年龄:<input  name="eage"/> 
      <span id="eage-msg"></span>
    <br/>
    薪资:<input name="esalary"/>
     <span id="esalary-msg"></span>
     <br/>
    部门:<select name="dept.deptno"  id="dept-sel">      
    </select> <br/>
    经理: <select name="mgr.empno"  id="mgr-sel">       
    </select> <br/>
    <input type="button"  value="修改员工" id="btn"/>
 </form>
</body>
</html>